<style lang="less" scoped>
  .dido{
    width: 100%;
    height: 100%;
    &_title{
      height: 40px;
      background: url('~@/images/contenttitle.png');
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: 80% 50%;
      text-align: center;
      color: #00F6FF;
      line-height: 40px;
      margin-bottom: 5px;
    }
    &_content{
      height: calc(100% - 45px);
    }
    .no-data{
      color: #fff;
      width: 100%;
      font-size: 14px;
      height: calc(100% - 45px);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>

<template>
  <div class="dido">
    <div class="dido_title">
      <span>{{ DIDOTitle }}</span>
    </div>
    <medical-charts v-if="timeLine.length > 0" :chart-id="chartId" :legend-title="legendTitle" :time-line="timeLine" :chart-data="chartData" :left-y="leftY" :right-y="rightY" class="dido_content" />
    <div v-else class="no-data">暂无数据</div>
  </div>
</template>

<script>
import medicalCharts from './medicalCharts'
import { getDIDORatio, getStrokeDrugTreatRatio } from '@/api/comprehensive/DIDO'
export default {
  components: {
    medicalCharts
  },
  props: {
    isStrock: {
      type: String,
      default: 'chestPain'
    }
  },
  data() {
    return {
      setInter: null,
      DIDOTitle: '5、非PCI医院停留时间（DIDO）',
      chartId: 'dido2',
      legendTitle: ['平均值', '达标率'],
      leftY: '分钟',
      rightY: '%',
      timeLine: [],
      chartData: []
    }
  },
  watch: {
    'isStrock'() {
      this.init()
    }
  },
  mounted() {
    this.init()
    this.setInter = setInterval(() => {
      this.init()
    }, 5000)
  },
  destroyed() {
    clearInterval(this.setInter)
  },
  methods: {
    init() {
      if (this.isStrock == 'stroke') {
        this.DIDOTitle = '药物治疗比率'
        this.legendTitle = ['脑梗死', '脑出血', '脑出血降压', '破裂动脉瘤围手术期尼莫地平药物治疗']
        this.leftY = '比率'
        this.rightY = ''
        let NGSData = []
        let NCXData = []
        let NCXJYData = []
        let PLDMLData = []
        getStrokeDrugTreatRatio({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.code == 0) {
            if (res.data && res.data.length > 0) {
              let timeLine = []
              res.data.forEach(el => {
                timeLine.push(el.timeName)
                NGSData.push(el.ratioCIDrugTreat)
                NCXData.push(el.ratioCHDrugTreat)
                NCXJYData.push(el.ratioCHAntiHypertension)
                PLDMLData.push(el.ratioIARNimodipine)
              })
              this.timeLine = timeLine
              this.chartData = [
                {
                  name: '脑梗死',
                  type: 'bar',
                  barWidth: 20,
                  label: {
                    show: true
                    // position: 'top
                  },
                  data: NGSData
                }, {
                  name: '脑出血',
                  type: 'bar',
                  barWidth: 20,
                  label: {
                    show: true
                    // position: 'top'
                  },
                  data: NCXData
                }, {
                  name: '脑出血治疗',
                  type: 'bar',
                  barWidth: 20,
                  label: {
                    show: true
                    // position: 'top'
                  },
                  data: NCXJYData
                }, {
                  name: '破裂动脉瘤围手术期尼莫地平药物治疗',
                  type: 'bar',
                  barWidth: 20,
                  label: {
                    show: true
                    // position: 'top'
                  },
                  data: PLDMLData
                }
              ]
            }
          }
        })
      }
    }
  }
}
</script>
